import { createRef, memo, useEffect } from "react";
import * as echarts from "echarts";

const Abroad = memo(() => {
  const chartsRef = createRef();

  useEffect(() => {
    if (echarts) {
      initEcharts();
    }
    return () => {
      console.log(123);

      echarts.dispose("");
    };
  });
  const initEcharts = () => {
    const element = chartsRef.current as HTMLElement;
    // 渲染echarts2的方法开始
		    echarts2 () {
			      var chartDom = document.getElementById('echart2');//这里放的“echarts2”就是你上方创建盒子的id
			      var myChart = echarts.init(chartDom);
			      var option;
			      myChart.showLoading();
			      //2、 这个geoJson数据可以自己在网上找相关的浙江省的数据，或者从后端的接口来调用数据
			      myChart.hideLoading();
						//下面这个geoJSON就是上面通过import 引入的自己制作的mapData.js文件
			      echarts.registerMap('ZJ', geoJson.mapData);
			      myChart.setOption(option = {
			        //4、 这个是放到一小块地图上展示的内容，他是根据series中的data数组来决定的name:b，value:c（b: 表示名称，c: 表示值）
			        tooltip: {
			          trigger: 'item',
			          formatter: '{b}<br/>{c} (分)'
			        },
			        //6、 这个是根据data中的value值来相应的显示不同的颜色（在这里是根据人口密度来显示不同的颜色；）
			        visualMap: {
			          show: true,
			          x: 'left',
			          y: '58%',//可以设置左边提示的位置；
			          itemWidth: 12,
			          itemHeight: 12,
			          splitList: [
			            { start: 0, end: 20, label: '轻微', color: '#29A4D7' }, { start: 20, end: 50, label: '一般', color: '#E6C249' },
			            { start: 50, end: 60, label: '重点提示', color: '#DD970B' }, { start: 60, end: 80, label: '重大', color: '#5934EC' },
			            { start: 80, end: 100, label: '重点关注', color: '#B52621' }
			          ],
			          textStyle: {
			            color: '#fff' // 值域文字颜色
			          },
			          // color: ['#B52621', '#5934EC', '#DD970B', '#E6C249', '#29A4D7']
			        },
			        series: [
			          {
			            name: '浙江省地图',
			            type: 'map',
			            mapType: 'ZJ', // 自定义扩展图表类型
			            // 设置每一块中具体文字
			            label: {
			              normal: {
			                show: true,
			                formatter: function (params) {
			                  return params.name + "\n" + params.value;
			                },
			                textStyle: {
			                  fontWeight: 'normal',
			                  fontSize: 12,
			                  color: '#fff'
			                },
			              },
			            },
			            // 下面这个可以设置鼠标悬停上面的效果
			            emphasis: {//对应的鼠标悬浮效果
			              // show: true,
			              label: {
			                textStyle: { color: "#FFFFFF" },
			
			              },
			              itemStyle: {
			                areaColor: '#CCC'
			              }
			            },
			            itemStyle: {
			              //设置边框为白色
			              normal: {
			                borderWidth: 0.5,//边际线大小
			                borderColor: '#fff',//边界线颜色
			              },
			            },
			            data: [
			               {
			                name: '湖州市',
			                value: 87,
			               },
										 {
			                name: '嘉兴市',
			                value: 22,
			               },
			               {
			                name: '杭州市',
			                value: 65,
			               },
			               {
			                 name: '绍兴市',
			                 value: 43,
			               },
			               {
			                 name: '舟山市',
			                 value: 11,
			               },
			               {
			                 name: '宁波市',
			                 value: 54,
			               },
			               {
			                 name: '金华市',
			                 value: 33,
			               },
			               {
			                 name: '台州市',
			                 value: 56,
			               },
			               {
			                 name: '丽水市',
			                 value: 12,
			               },
			               {
			                 name: '温州市',
			                 value: 78,
			               },
			               {
			                 name: '衢州市',
			                 value: 43,
			               },
			             ],
			          }
			        ]
			      });
			      option && myChart.setOption(option);
						//下面这个是做屏幕适配的
			      window.addEventListener("resize", function () {
			        myChart.resize();
			        // console.log('#2334434545')
			      })
			    },
			    // 渲染echrts2的方法结束
			
  };
  return (
    <div
      ref={chartsRef as React.RefObject<HTMLDivElement>}
      id="charts"
      style={{ height: "300px" }}
    ></div>
  );
});

export default Abroad;
